<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
	<jsp:include page="/include.jsp"/>
	<script type="text/javascript">
	var selected="day";
	var datagirdFlag=true;
	 $(document).ready(function(){
		 $("#btnQuery").bind("click",doQuery);
		 $("#btnReset").bind("click",doReset);
		 $('#dqm_kpidatasearch_table').datagrid({
				url:'',
				title:'指标数据查询',
				fit:true,
				border:false,
				fitColumns:true,
				pagination:true,
				striped:true,
				pageList:[10,15,20],
				rownumbers:false,
				singleSelect:false,
				pagePosition:'bottom',
				autoRowHeight:true,
				columns: [[
						]]
			});
		 
		//加载指标名称数据
			$('#dqm_kpidatasearch_kpiName').combogrid({   
				delay: 500,
				panelWidth:450,
				mode: 'remote',   
				url: '${pageContext.request.contextPath}/mininganalysis/dataImportAction!getAllKqiName.action',   
				idField: 'kqiid',   
				textField: 'kqiname',  
		        pagination : true,//是否分页  
		        rownumbers:true,//序号  
		        collapsible:false,//是否可折叠的  
		        fit: true,//自动大小  
		        fitColumns:true,
		        pageList:[10,20,30],//可以设置每页记录条数的列表  
		        method:'post', 
		        sortName:'createtime',
		        sortOrder:'desc',
				columns: [[   
				      {field:'kqiid',title:'指标ID',width:50,sortable:true,align:'center'},   
				      {field:'kqiname',title:'指标名称',width:85,align:'center'},
				      {field:'kqiversionnum',title:'版本号',width:30,align:'center'},
				      {field:'periodType',title:'周期类型',width:50,align:'center',formatter:function(value,rowData,rowIndex){
				    	  if(rowData.periodType==3){//日粒度
				    		  return '日';
				    	  }
				    	  if(rowData.periodType==2){//月粒度
				    		  return '月';
				    	  }
				    	  if(rowData.periodType==4){//时粒度
				    		  return '时';
				    	  }
				    	  
				      }} 
				]],
				onSelect:function(value,rowData){
					$('#dqm_kpidatasearch_table').datagrid('loadData', { total: 0, rows: [] }); //清空数据
					$("#dqm_kpidatasearch_tempkpiid").val(rowData.kqiid);
					$("#dqm_kpidatasearch_kqiversionnum").val(rowData.kqiversionnum);
					//设置周期类型
					if(rowData.periodType==3){//日
						  selected="day";
						  $("#dqm_kpidatasearch_select_dayormonth").val("日粒度");
						  $("#dqm_kpidatasearch_select_periodType").val("day");
						  ChangeDataSearchPeriodType(3);//初始化日期类型
					}
					if(rowData.periodType==2){//月
						  selected="month";
						  $("#dqm_kpidatasearch_select_dayormonth").val("月粒度");
						  $("#dqm_kpidatasearch_select_periodType").val("month");
						  ChangeDataSearchPeriodType(2);//初始化日期类型
					}
					if(rowData.periodType==4){//时
						  selected="hour";
						  $("#dqm_kpidatasearch_select_dayormonth").val("时粒度");
						  $("#dqm_kpidatasearch_select_periodType").val("hour");
						  ChangeDataSearchPeriodType(4);//初始化日期类型
					}
					loadColumns();
				},
				toolbar:'#dqm_kpidatasearch_toolbal',
				onLoadSuccess:function(){
					if(datagirdFlag){
						datagirdFlag=false;
						var rows=$('#dqm_kpidatasearch_kpiName').combogrid('grid').datagrid('getRows');
						if(rows.length){
							var dgOptions=$('#dqm_kpidatasearch_table').datagrid('options');
							dgOptions.columns[0]=[];
							dgOptions.url='';
							$('#dqm_kpidatasearch_kpiName').combogrid('setValue',rows[0]['kqiname']);
							$("#dqm_kpidatasearch_kqiversionnum").val(rows[0]['kqiversionnum']);
							$("#dqm_kpidatasearch_tempkpiid").val(rows[0]['kqiid']);
							//设置周期类型
							if(rows[0]['periodType']==3){
								selected="day";
								$("#dqm_kpidatasearch_select_periodType").val("day");
								$("#dqm_kpidatasearch_select_dayormonth").val("日粒度");
								ChangeDataSearchPeriodType(3);
							}else if(rows[0]['periodType']==2){
								selected="month";
								$("#dqm_kpidatasearch_select_periodType").val("month");
								$("#dqm_kpidatasearch_select_dayormonth").val("月粒度");
								ChangeDataSearchPeriodType(2);
							}else{
								selected="hour";
								$("#dqm_kpidatasearch_select_periodType").val("hour");
								$("#dqm_kpidatasearch_select_dayormonth").val("时粒度");
								ChangeDataSearchPeriodType(4);
							}
							$.ajax({
								 url:'${pageContext.request.contextPath}/basemgr/kpiDataSearchAction!getNoSqlDataColumn.action',
								 data:serializeObject($('#dqm_kpidatasearch_form')),
								 dataType :'json',
								 async:false,
								 success : function(dyColumns){ 
									 if(null!=dyColumns){
											//获取datagrid的配置信息
											var dgOptions=$('#dqm_kpidatasearch_table').datagrid('options');
											//dyColumns类似:[{field:'dim_city',title:'南京'}，{field:'dim_city',title:'南京'}]
											for(var idx=0;idx<dyColumns.length;idx++){
												//往json对象中添加属性，变成类似:{field:'dim_city',title:'南京',width:80,align:'center',editor:'text'}
												dyColumns[idx].editor="text";
												dyColumns[idx].width=150;
												dyColumns[idx].align="center";
												//向datagrid的第一个列列数组的最前面添加列
												dgOptions.columns[0].push(dyColumns[idx]);
											}
											//重新配置datagrid
											dgOptions.queryParams=serializeObject($('#dqm_kpidatasearch_form')),
											dgOptions.url='${pageContext.request.contextPath}/basemgr/kpiDataSearchAction!query.action';
											//重新配置datagrid
											$('#dqm_kpidatasearch_table').datagrid(dgOptions); 
									 }
								 }
						     });
						}
					}
				}
		   });  
	 });
	 
	 //分页查询
	function doQuery(){
		if(validDate()){
		    var kpiName=$("#dqm_kpidatasearch_kpiName").combogrid("getValue");
			if(""!=kpiName && null!=kpiName){
				var dgOptions=$('#dqm_kpidatasearch_table').datagrid('options');
				dgOptions.queryParams=serializeObject($('#dqm_kpidatasearch_form')),
				dgOptions.url='${pageContext.request.contextPath}/basemgr/kpiDataSearchAction!query.action';
				//重新配置datagrid
				$('#dqm_kpidatasearch_table').datagrid(dgOptions); 
			}else{
				$.messager.alert("操作提示!","指标名称不允许为空！");
			}
			
		}
     }
	
	 function loadColumns(){
		 $.ajax({
			 url:'${pageContext.request.contextPath}/basemgr/kpiDataSearchAction!getNoSqlDataColumn.action',
			 data:serializeObject($('#dqm_kpidatasearch_form')),
			 dataType :'json',
			 async:false,
			 success : function(dyColumns){ 
				 if(null!=dyColumns){
						//获取datagrid的配置信息
						var dgOptions=$('#dqm_kpidatasearch_table').datagrid('options');
						    dgOptions.columns[0]=[];
						    dgOptions.url='';
						//dyColumns类似:[{field:'dim_city',title:'南京'}，{field:'dim_city',title:'南京'}]
						for(var idx=0;idx<dyColumns.length;idx++){
							//往json对象中添加属性，变成类似:{field:'dim_city',title:'南京',width:80,align:'center',editor:'text'}
							dyColumns[idx].editor="text";
							dyColumns[idx].width=150;
							dyColumns[idx].align="center";
							//向datagrid的第一个列列数组的最前面添加列
							dgOptions.columns[0].push(dyColumns[idx]);
						}
						//重新配置datagrid
						$('#dqm_kpidatasearch_table').datagrid(dgOptions); 
				 }
			 }
	     });
	 }
	 //清空数据
	 function doReset(){
		$('#dqm_kpidatasearch_kpiName').combogrid('clear');
		$("#dqm_kpidatasearch_select_dayormonth").val("");
	    $("#dqm_kpidatasearch_startDate").val(getDateStr(0));//赋值当前时间
	    $("#dqm_kpidatasearch_endDate").val(getDateStr(-1));//赋值昨天时间
		$('#dqm_kpidatasearch_table').datagrid('loadData', { total: 0, rows: [] }); //清空数据
	 } 
	 //验证时间格式
	 function validDate(){
		var startDate=$("#dqm_kpidatasearch_startDate").val();
		var endDate=$("#dqm_kpidatasearch_endDate").val();
	    if(""!=startDate && ""!=endDate){
			if(eval(startDate)>eval(endDate)){
				$.messager.alert("操作提示!","开始时间不允许大于结束时间");
				return false;
			}else{
				return true;
			}
		}else{
				return true;
		}
			
	 }
	 function querykpiName(){
			var kqiname=$('#dqm_kpidatasearch_combogrid_kpiname').val();	
			var query={kqiname:kqiname}; //把查询条件拼接成JSON
			var grid=$("#dqm_kpidatasearch_kpiName").combogrid('grid');
			$(grid).datagrid('options').queryParams=query; //把查询条件赋值给datagrid内部变量
			$(grid).datagrid('load');
	 }
		
	 function resetQuery(){
			$('#dqm_kpidatasearch_combogrid_kpiname').val('');
	 }
   //周期类型改变
   function ChangeDataSearchPeriodType(value){
	   $("#dqm_kpidatasearch_startDate").val("");
	   $("#dqm_kpidatasearch_endDate").val("");
 	   if(value==3){//日
 		   $("#dqm_kpidatasearch_startDate").my97({
 	   	         dateFmt:'yyyyMMdd',
 	   	         width:120,
 		   	     startDate:[{
 		   			 doubleCalendar:false,
 		   			 isShowWeek:false,
 		   			 isShowClear:false,
 		   			 readOnly:true
 		   	     }]
 	        });
 		  $("#dqm_kpidatasearch_endDate").my97({
	   	         dateFmt:'yyyyMMdd',
	   	         width:120,
		   	     startDate:[{
		   			 doubleCalendar:false,
		   			 isShowWeek:false,
		   			 isShowClear:false,
		   			 readOnly:true
		   	     }]
	        });
 		  //初始化默认时间
 		  $("#dqm_kpidatasearch_startDate").val(getDateStr(-1));
 		  $("#dqm_kpidatasearch_endDate").val(getDateStr(0));
 	   }else if(value==2){//月
 		   $("#dqm_kpidatasearch_startDate").my97({
 	   	         dateFmt:'yyyyMM',
 		   	     startDate:[{
 		   			 doubleCalendar:false,
 		   			 isShowWeek:false,
 		   			 isShowClear:false,
 		   			 readOnly:true
 		   	     }]
 	        });
 		   $("#dqm_kpidatasearch_endDate").my97({
	   	         dateFmt:'yyyyMM',
		   	     startDate:[{
		   			 doubleCalendar:false,
		   			 isShowWeek:false,
		   			 isShowClear:false,
		   			 readOnly:true
		   	     }]
	        });
 		  //初始化默认时间
  		  $("#dqm_kpidatasearch_startDate").val(myformatter(-1));
  		  $("#dqm_kpidatasearch_endDate").val(myformatter(0));
 	   }else{//时
 		   $("#dqm_kpidatasearch_startDate").my97({
 	   	         dateFmt:'yyyyMMddHH',
 		   	     startDate:[{
 		   			 doubleCalendar:false,
 		   			 isShowWeek:false,
 		   			 isShowClear:false,
 		   			 readOnly:true
 		   	     }]
 	        });
 		  $("#dqm_kpidatasearch_endDate").my97({
	   	         dateFmt:'yyyyMMddHH',
		   	     startDate:[{
		   			 doubleCalendar:false,
		   			 isShowWeek:false,
		   			 isShowClear:false,
		   			 readOnly:true
		   	     }]
	        });
 		  //初始化默认时间
  		  $("#dqm_kpidatasearch_startDate").val(getHourStr());
  		  $("#dqm_kpidatasearch_endDate").val(getHourStr());
 	   }
    }
   //格式化日期函数:日
   function getDateStr(AddDayCount) {
	    var dd = new Date();
	    dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
	    var y = dd.getFullYear();
	    var m = dd.getMonth()+1;//获取当前月份的日期
	    if(m<=9){
	    	m="0"+m;
	    }
	    var d = dd.getDate();
	    if(d<=9){
	    	d="0"+d;
	    }
	    return y+m+d;
   }
   //格式化日期函数:月
   function myformatter(AddMonth){
       var date=new Date();
  		var y = date.getFullYear();
  		var m ="";
  		if(AddMonth==0){
  			m = date.getMonth()+1;
  		}else{
  			m = date.getMonth();
  		}
  		var d = date.getDate();
  		return y+(m<10?('0'+m):m);
    }
   //格式化日期函数:时
   function getHourStr() {
	    var dd = new Date();
	    dd.setDate(dd.getDate());//获取AddDayCount天后的日期
	    var y = dd.getFullYear();
	    var m = dd.getMonth()+1;//获取当前月份的日期
	    if(m<=9){
	    	m="0"+m;
	    }
	    var h = dd.getHours();//获取当前小时
	    if(h<10){
	       h="0"+h;
	    }
	    var d = dd.getDate();
	    if(d<=9){
	    	d="0"+d;
	    }
	    return y+m+d+h;
   }
	</script>
</head>

<body class="easyui-layout">
    <form id="dqm_kpidatasearch_form" method="post">
        <div data-options="region:'north'" style="height:80px;border-bottom:none;border-top:none;">
	    	<table border="0"  cellpadding="0" cellspacing="0" height="100%"  width="100%" >
	    		<tr>
		    		<td style="text-align:right;width:10%;" nowrap="nowrap">
		    			<label for="dqm_kpidatasearch_kpiName">指标名称：&nbsp;</label>
		    		</td>
					<td style="text-align:left;width:15%;" >
	    				<input type="text" id="dqm_kpidatasearch_kpiName" name="kpiid" />
	    				<input type="hidden" id="dqm_kpidatasearch_kqiversionnum" name="kqiversionnum" />
	    				<input type="hidden" id="dqm_kpidatasearch_tempkpiid" name="tempkpiid" />
					</td>
					<td style="text-align:left;width:15%;"  nowrap="nowrap">
						<span style="vertical-align: middle;margin-left:10px">周期类型：</span>
						<input type="text" id="dqm_kpidatasearch_select_dayormonth" readonly="readonly" style="width:100px;margin-right:2.5px;"/>
						<input type="hidden" id="dqm_kpidatasearch_select_periodType" name="periodType"/>
					</td>
					<td style="text-align:left;width:35%;" nowrap="nowrap">
	    				          <span style="vertical-align: middle;margin-left:10px">数据日期：</span>
	    				          <input id="dqm_kpidatasearch_startDate"    name="startDate"  type="date"  style="width:160px;margin-left:5px;"/>
	    				      至&nbsp;<input id="dqm_kpidatasearch_endDate"    name="endDate"  type="date"  style="width:160px;"/>
					</td>
					<td colspan="2" style="width:25%;text-align:center;" nowrap="nowrap" >	   
			    		<input type="button" id="btnQuery" name="" value="查 询" style="cursor:pointer;background-image: url('${pageContext.request.contextPath}/images/login/search.png');background-repeat: no-repeat;width:67px;height:23px;padding-left:12px;border:none;color:white;font-family:微软雅黑;"/>	
			    		<input type="button" id="btnReset" name="" value="重 置" style="cursor:pointer;background-image: url('${pageContext.request.contextPath}/images/login/reset.png');background-repeat: no-repeat;width:67px;height:23px;padding-left:12px;border:none;color:white;font-family:微软雅黑;margin-right:37px"/>				
	    			</td>
	    		</tr>
			</table>
	    </div>  
		<div  data-options="region:'center'" style="border-top-color:#cbcbcb">
			<table id="dqm_kpidatasearch_table"></table>
		</div>
    </form>
    <div id="dqm_kpidatasearch_toolbal" style="padding:5px;height:auto">   
	    <div>  
	               指标名称 : <input id="dqm_kpidatasearch_combogrid_kpiname" type="text" class="easyui-validatebox" name="kpiname" style="width:150px" >  
	        <input type="button" id="" onclick="querykpiName()" value="查 询" style="cursor:pointer;background-image: url('${pageContext.request.contextPath}/images/login/search.png');background-repeat: no-repeat;width:67px;height:23px;padding-left:12px;border:none;color:white;font-family:微软雅黑;"/>	
			<input type="button" id="" onclick="resetQuery()" value="重 置" style="cursor:pointer;background-image: url('${pageContext.request.contextPath}/images/login/reset.png');background-repeat: no-repeat;width:67px;height:23px;padding-left:12px;border:none;color:white;font-family:微软雅黑;margin-right:55px"/> 
	    </div>  
    </div>
</body>
</html>
